import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import DemoContext from "./demo/demoContext"
/* // 实现useState, 修复使用多次useState出现的问题
// 通过定义个数组对象，以及stateIndex索引，每次调用useState都把索引增加，可以进行区别不同的useState
let lastStates = [];
let stateIndex = 0;
function useState(initialState) {
  lastStates[stateIndex] = lastStates[stateIndex] || initialState;
  let currentIndex = stateIndex;
  function setState(newState) {
    lastStates[currentIndex] = newState;
    render();
    stateIndex = 0;
  }
  return [lastStates[stateIndex++], setState];
} */
/* 
let lastMemo;
let lastMemoDependencies;
function useMemo(callback, dependencies) {
  if (lastMemoDependencies) {
    let changed = dependencies.some((item, index) => {
      return item !== lastMemoDependencies[index];
    });
    if (changed) {
      lastMemo = callback();
      lastMemoDependencies = dependencies;
    }
  } else {
    lastMemo = callback();
    lastMemoDependencies = dependencies;
  }
  return lastMemo;
}
let lastCallback;
let lastCallbackDependencies;
function useCallback(callback, dependencies) {
  if (lastCallbackDependencies) {
    let changed = dependencies.some((item, index) => {
      return item !== lastCallbackDependencies[index];
    });
    if (changed) {
      lastCallback = callback;
      lastCallbackDependencies = dependencies;
    }
  } else {
    lastCallback = callback;
    lastCallbackDependencies = dependencies;
  }
  return lastCallback;
} */

/* let lastState;
function useReducer(reducer, initialState) {
  lastState = lastState || initialState;
  function dispatch(action) {
    // reducer函数执行后会返回一个新的处理过的数据
    lastState = reducer(lastState, action);
    render();
  }
  return [lastState, dispatch];
} */
let lastDependencies;
function useEffect(effect, dependencies) {
  if (lastDependencies) {
    // effect存在
    let changed = dependencies.some((item, index) => {
      return item !== lastDependencies[index];
    });
    if (changed) {
      setTimeout(effect);
      lastDependencies = dependencies;
    }
  } else {
    setTimeout(effect);
    lastDependencies = dependencies;
  }
}
let lastLayoutDependencies;
function useLayoutEffect(effect, dependencies) {
  if (lastLayoutDependencies) {
    // effect存在
    let changed = dependencies.some((item, index) => {
      return item !== lastLayoutDependencies[index];
    });
    if (changed) {
      Promise.resolve().then(effect);
      lastLayoutDependencies = dependencies;
    }
  } else {
    Promise.resolve().then(effect);
    lastLayoutDependencies = dependencies;
  }
}
function AnimationEffect() {
  const ref = useRef();
  useLayoutEffect(() => {
    console.log("useEffec");
    ref.current.style.transform = "translateX(500px)";
    ref.current.style.transition = "all 0.8s";
  });
  let style = {
    width: "100px",
    height: "100px",
    backgroundColor: "red",
  };
  console.log('render');
  return <div style={style} ref={ref}></div>;
}
function App() {
  let [num, setNum] = useState(0);
  let [name, setName] = useState("effect");
  useEffect(() => {
    console.log("num", num);
  }, [num]);
  return (
    <div>
      <p>
        {name}:{num}
      </p>
      <button onClick={() => setName("hello")}>change name</button>
      <button onClick={() => setNum(num + 1)}>+</button>
    </div>
  );
}

function render() {
  ReactDOM.render(<DemoContext />, document.getElementById("root"));
}
render();
